<template>
    <div @tap="onTap" class="sort e-flex-x" style="align-items: center;">
        <text class="t">{{ title }}</text>
        <view class="sort-status e-flex-y" style="align-items: center;justify-content: center;margin-bottom: -2rpx;">
            <view class="up" :class="{ on: desc }"></view>
            <view class="gap" style="height: 4rpx;"></view>
            <view class="down" :class="{ on: !desc }"></view>
        </view>
    </div>
</template>

<script setup>

import { computed, ref } from 'vue'

const props = defineProps({
    title: "价格",
})

const title = computed(() => props.title)

const emits = defineEmits(["change"])

const desc = ref(true) // true 从大到小降序排列

const onTap = () => {
    desc.value = !desc.value
    emits("change", desc.value)
}

</script>

<style lang="scss" scoped>
.sort {
    .up{
        width: 0;
        height: 0;
        border: 4px solid #ccc;
        border-color: transparent transparent #ccc transparent;
        &.on{
            border-color:  transparent transparent #E4423B transparent;
        }
    }

    .down{
        width: 0;
        height: 0;
        border: 4px solid #ccc;
        border-color: #ccc transparent transparent transparent;
        &.on{
            border-color: #E4423B transparent transparent transparent;
        }
    }
}
</style>